﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function esconde() {
            var d = this.document.getElementById("div1");
            //var c = this.document.getElementById("Checkbox1");
            if (this.document.getElementById("Checkbox1").checked) {
                d.style.display == "block" ? d.style.display = "none" : d.style.display = "block";
            }
        }
        function colorPicker(ID) {
            var cor = document.getElementById(ID);
            if (cor.currentStyle) {
                this.corSelecionada.style.backgroundColor = cor.currentStyle.backgroundColor;
            } else if (window.getComputedStyle) {
                //this.corSelecionada.style.backgroundColor = document.defaultView.getComputedStyle(cor, null).getPropertyValue("background-color");
                this.document.getElementById("corSelecionada").style.backgroundColor = cor.style.backgroundColor;
            }
        }

        function getStyle(el, styleProp) {
            var x = document.getElementById(el);
            if (x.currentStyle)
                var y = x.currentStyle[styleProp];
            else if (window.getComputedStyle)
                var y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp);
            return y;
        }
    </script>
    <style type="text/css">
        div{width:60px;height:40px;margin:20px;float:left;cursor:pointer;}
        .tooltip table{display:none; border:2px solid #888}
        .tooltip:hover table{display:block;position:absolute;right:50px;}
    </style>
</head>
<body>
    <table cellpadding="0" cellspacing="0" style="width: 100%; height: 200px">
        <tr>
            <td>
                <table style="width: 100%;">
                    <tr>
                        <td style="width: 120px">
                        Cor selecionada:
                        </td>
                        <td id="corSelecionada" style="width: 50px">
                        </td>
                        <td>
                        </td>
                    </tr>
                </table>
                <br />
                <p>
                    Clique nas caixas abaixo:</p>
                <div onclick="colorPicker(id);" id="red" style="background-color: #0000FF"></div>
                <div onclick="colorPicker(id);" id="green" style="background-color: #00FF00"></div>
                <div onclick="colorPicker(id);" id="blue" style="background-color: #FF0000"></div>
            </td>
        </tr>
        <tr>
            <td align="center">
                <input id="Checkbox1" type="checkbox" onclick="esconde('div1');" />clica eu
                <div id="div1"  style="width: 200px; height: 200px; display:none; background-color: Blue; float:none;"></div>
            </td>
        </tr>
        <tr>
            <td>
            <a href="#" class="tooltip">Passa aqui
                <table><tr><td>Opa, deu certo!  =]</td></tr></table>
            </a>
            </td>
        </tr>
    </table>
    <div id="fixme" style="background-color:Red;position:fixed;bottom:-20px;right:-20px;width:30px;height:10px"></div>
</body>
</html>
